<template>
  <div>
    <a-page-header
      style="
        border: 0px solid rgb(235, 237, 240);
        height: 56px;
        background-color: #ffff;
        box-shadow: rgba(60, 60, 60, 0.07) 0px 0px 3px;
      "
      title=""
      :breadcrumb="{ props: { routes } }"
      sub-title=""
    />

    <div style="margin: 20px; background-color: #ffff">
      <div
        class="table-page-search-wrapper"
        style="
          background-color: #f5faff;
          padding: 15px;
          border-bottom: 1px solid rgb(230, 230, 230);
          color: rgba(0, 0, 0, 0.65);
        "
      >
        <a-form layout="inline">

              <a-form-item label="采样地点:">
                <a-input placeholder="请输入" style="width: 200px" />
              </a-form-item>

              <a-form-item label="是否合格">
                <a-select
                  placeholder="请选择"
                  default-value="0"
                  style="width: 200px"
                >
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">合格</a-select-option>
                  <a-select-option value="1">不合格</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="检测时间">
                 <a-range-picker @change="onChange" />
                           <a-button
            type="primary"
            icon="search"
            style="margin-left: 18px"

            >搜索</a-button
          >
                  </a-form-item>

        </a-form>
      </div>

      <div class="table-operator" style="padding: 20px">
        <p style="float: left; font-size: 18px; font-weight: 700 ;color:#000">
          {{$t('testing')}}
        </p>
        <p style="float: right">
          <a-button
            type="primary"
            icon="plus"
            style="margin-left: 8px"
            @click="showModal"
            >添加</a-button
          >
          <a-button
            type="danger"
            icon="delete"
            style="margin-left: 8px"
            @click="deleteinfo"
            >删除</a-button
          >
        </p>
      </div>
      <Tablecustom
        :columns="columns"
        :dataSource="data"
        :pagination="true"
        :tableLoading="loading"
        :total="total"
        size="middle"
        pk="key"
        mode='checkbox'
        @queryData="getDatas"
      />

      <a-modal
        title="添加"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <Form />
      </a-modal>
    </div>
  </div>
</template>

<script>
import Form from '@/components/publiccomponent/Form.vue'
import Tablecustom from '@/components/custom/Tablecustom'

export default {
  name: 'TableList',
  components: {
    Tablecustom,
    Form
  },
  data () {
    return {
      total: 100,
      loading: false,
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      routes: [
        {
          path: '',
          breadcrumbName: '首页'
        },
        {
          path: '',
          breadcrumbName: '详情页'
        },
        {
          path: '',
          breadcrumbName: '查询表格'
        }
      ],
      // 高级搜索 展开/关闭
      columns: [
        {
          title: '用户账号',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '用户姓名',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: '头像',
          dataIndex: 'address',
          key: 'address'
        },
        {
          title: '性别',
          dataIndex: 'address1',
          key: 'address1'
        },
        { title: '生日', dataIndex: 'address2', key: 'address2' },
        { title: '手机号', dataIndex: 'address3', key: 'address3' },
        { title: '部门', dataIndex: 'address4', key: 'address4' },
        { title: '负责部门', dataIndex: 'address5', key: 'address5' },

        {
          title: '操作项',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer']
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser']
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher']
        }
      ]
    }
  },
  methods: {
    getDatas () {
      this.total = this.total + 1 // 后端获取total
    },
    showModal () {
      this.visible = true
    },
    handleOk (e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel (e) {
      console.log('Clicked cancel button')
      this.visible = false
    },

    onChange (date, dateString) {
      console.log(date, dateString)
    },
    deleteinfo () {}
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block;
}

.operator {
  margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
